<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		//DOM节点（2）
		  //首尾子节点（有兼容性问题）
		  //firstChild,firstElementChild
		  //lastChild,lastElementChild
  
		//兄弟节点（有兼容性问题）
		  //nextSibling nextElementSibling
		  //previousSibling previousElementSibling

		window.onload=function(){
           var box=document.getElementById('box');
           var lis=box.getElementsByTagName('li');
           //判断box.firstElementChild是否存在
           //如果不存在，执行IE6-8的语法
           if (!box.firstElementChild) {
            //IE6-8
             box.firstChild.style.background='red';
           }else{
           	//高级浏览器
             box.firstElementChild.style.background="blue"; 
           }
           //alert(box.firstElementChild);


           if (!box.lastElementChild) {
            //IE6-8
             box.lastChild.style.background='red';
           }else{
           	//高级浏览器
             box.lastElementChild.style.background="blue"; 
           }


           //兄弟节点 下一个节点
           //alert(lis[0].nextSibling);
           if (!lis[0].nextElementSibling) {
             //IE6-8
             lis[0].nextSibling.style.background='#000';
           }else{
          
             //高级浏览器
             lis[0].nextElementSibling.style.background="#666"; 
           }


           //兄弟节点 上一个节点
           //alert(lis[4].previousElementSibling);
           if (!lis[4].previousElementSibling) {
             //IE6-8
             lis[4].previousSibling.style.background='#000';
           }else{
             //高级浏览器
             lis[4].previousElementSibling.style.background="#666"; 
           }



		}




	</script>
</head>
<body>
	<ul id="box">
		<li></li>
		<li></li>
		<li></li>
		<li></li>
		<li></li>
	</ul>
</body>
</html>